<template>
    <div>
      <div class="zhucecode-box">
        <div class="head-top">
            <input class="username" placeholder="请输入验证码" v-model="code" name="username">
          <span class="code" @click ="link">发送验证码</span>
        </div>
          <!-- //is-link 左箭头 -->
          <div class="submit" @click="showPopup" >下一步</div>
          <van-popup v-model="show" class="taichu">
             {{msg}}
          </van-popup>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  export default {
    name:"zhuceocode-vue",
    data(){
      return {
          code:"",
          show: false,
          msg:"",
      }
    },
    methods:{
      showPopup() {
          //检查改手机号是否被注册过
          axios.post("/api/user/docheckcode",`tel=${localStorage.getItem("tel")}&telcode=${this.code}`).then(res=>{
           if(res.data.code=="200"){
            this.$router.push("/zhuce/pwd")
            console.log("继续注册");
           }
          })
      },
      leap(){
          this.$router.push("/reg")
      },
      link(){
        axios.post("/api/user/dosendmsgcode",`tel=${localStorage.getItem("tel")}`)
        .then(res=>{
           if(res.data.code == "200"){
             this.show = true;
             this.msg = `${res.data.message}:${res.data.data}`
           }
        })
      }
    }
  }
  </script>
  
  <style scoped>
.zhucecode-box{
          height:15rem;
          background-color: #fff;
          overflow: auto;
      }
  .submit{
    width: 95%;
    height: 1.75rem;
    background-color:rgba(234, 115, 115, 0.999);
    text-align: center;
    margin: 0 auto;
    line-height: 1.75rem;
  
    color: white;
    border-radius:1rem;
    margin-top: 1rem;
  }
  .username{
    display: block;
    width: 80%;
    margin: 0 auto;
    height: 2rem;
    border: none;
   border-bottom: 1px solid rgb(189, 187, 187);
   color: black;
   margin-top: .5rem;
  }
  .taichu{
      width:300px;
      height: 1.5rem;
      background-color: white;
      border-radius: .5rem;
      text-align: center;
      line-height: 1.5rem;
      font-size: .6rem;
  }
  
  .head-top{
    position: relative;
  }
  .code{
    height: 1.75rem;
    width:4rem;
    text-align: center;
    border-radius: .5rem;
    line-height: 1.75rem;
    position: absolute;
    right: 0;
    top: 0;
    color: red;
    background-color: rgb(235, 178, 178);
    font-size: .6rem;
  }
  </style>